<template>
  <div class="exception">
    <div class="exception-img">
      <div class="exception-img-element">

      </div>
    </div>
    <div class="exception-content">
      <h1>{{type}}</h1>
      <div class="exception-content-desc">{{title}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: "exception",
  props: {
    type: {
      type: String,
      default: '403'
    },
    title: {
      type: String,
      default: '抱歉，您无权限访问'
    },
    desc: {
      type: String,
      default: ''
    },
  },
  computed: {
    searchData() {
      return configForm.bind(this)()
    },
    showNoPowerTip() {
      // 系统管理员才有权限
      const roleList = ['5']
      return !this.currentRole.split(',').some(item => roleList.includes(item))
    }
  },
};
</script>

<style lang="less" scoped>
  .exception {
    display: flex;
    align-items: center;
    height: 80%;
    min-height: 500px;
    .exception-img {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 62.5%;
      flex: 0 0 62.5%;
      width: 62.5%;
      padding-right: 152px;
      zoom: 1;
      .exception-img-element {
        background-image: url("../../asset/icons/icon-403.svg");
        float: right;
        width: 100%;
        max-width: 430px;
        height: 360px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
      }
    }
    .exception-content {
      -webkit-box-flex: 1;
      -ms-flex: auto;
      flex: auto;
      h1 {
        margin-bottom: 24px;
        color: #515a6e;
        font-weight: 600;
        font-size: 72px;
        line-height: 72px;
      }
      .exception-content-desc {
        margin-bottom: 16px;
        color: #808695;
        font-size: 20px;
        line-height: 28px;
      }
    }
  }
</style>
